<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <el-card
      class="pagination"
      style="height: 80px"
    >
      <el-form
        ref="fenYe"
        :inline="true"
        :model="fenye"
        class="demo-form-inline"
      >
        <el-form-item
          label="车辆类型"
          prop="truckTypeId"
        >
          <el-select
            v-model="fenye.truckTypeId"
            placeholder="请选择"
            value-key="id"
            clearable
          >
            <el-option
              v-for="(item, index) in cheLiangLeixingList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-form-item
            label="车牌号码"
            prop="licensePlate"
          >
            <el-input
              v-model="fenye.licensePlate"
              placeholder="请输入车牌号码"
            ></el-input>
          </el-form-item>

          <el-button

            type="danger"
            @click="onSubmit"
          >查询</el-button>
          <el-button
            type="danger"
            plain
            @click="chongzhi"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-tabs
      v-model="activeName"
      style="height: 100%"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        style="height: 100%"
        :label="'全部' + total1"
        name="first"
      ></el-tab-pane>
      <el-tab-pane
        :label="'可用'+total2"
        name="second"
      ></el-tab-pane>
      <el-tab-pane
        style="height: 100%"
        :label="'停用'+total3"
        name="third"
      ></el-tab-pane>
    </el-tabs>

    <el-card class="pagination">
      <el-row>
        <el-button
          type="success"

          @click="addCheliang"
        >新增车辆</el-button>
      </el-row>

      <el-table
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="60"
          label="序号"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          width="120"
          label="车牌号码"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="truckTypeName"
          width="120"
          label="车辆类型"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="driverNum"
          width="80"
          label="司机数量"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          width="120"
          label="车辆状态"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <div style="width: 100%; align: center"></div>
            <span

              style="display: inline-block; width: 100%; text-align: center"

              class="tableColumn-status"

              :class="{ 'stop-use': getState(scope.row.workStatus) === '停用' }"
            >
              {{ scope.row.workStatus=== 0 ? '停用' : '可用' }}
            </span></template>
        </el-table-column>
        <el-table-column
          prop="deviceGpsId"
          width="120"
          label="GPS设备ID"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="实载重量(T)"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="实载体积(方)"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="$router.push({
                path: '/transit/vehicle-detail',
                query:{
                  id:scope.row.id,
                  formUrlName: '车辆管理'
                }
              })"
            >查看详情</el-button>
            <el-button
              v-if="!scope.row.workStatus"
              type="text"
              size="small"
              class="ysb"
              @click="qiYong(scope.row.id)"
            >启用</el-button>
            <el-button
              v-else
              type="text"
              size="small"
              class="ysr"
              @click="tingYong(scope.row.id)"
            > 停用 </el-button>
            <el-button
              type="text"
              size="small"
              @click="peizhi(scope.row)"
            >配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="block"
        style="text-align: center"
      >
        <el-pagination
          :current-page="fenye.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="fenye.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加弹框 -->
    <el-dialog
      title="新增车辆"
      :visible.sync="dialogFormVisible"
      @close="guanbiXinzeng"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="车辆类型"
          prop="truckTypeId"
        >
          <el-select
            v-model="form.truckTypeId"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in cheLiangLeixingList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          prop="licensePlate"
        >
          <el-input
            v-model="form.licensePlate"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="GPS设备ID"
          prop="deviceGpsId"
        >
          <el-input
            v-model="form.deviceGpsId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="tianJiacheliang"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 启用停用弹框 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="qiyong"
      width="30%"
    >
      <div class="tal">确定要启用吗？车辆启用需满足以下条件：</div>
      <div class="qiyong">
        <span>1:车辆信息已完善</span>
        <span>2:绑定司机>=2,且有排班</span>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="qiyong = false">取 消</el-button>
        <el-button
          type="primary"
          @click="qiyongQueding"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 停用 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="tingYongs"
      width="30%"
    >
      <div class="tal">确定要停用吗？车辆停用需满足以下条件：</div>
      <div class="qiyong">
        <span>1:车辆当前无运输任务</span>
        <span>2:车辆无关联运输线路</span>
      </div>
      <div class="tal1"><span>注：停用后司机将自动解除绑定</span></div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="tingYongs = false">取 消</el-button>
        <el-button
          type="primary"
          @click="tingYongqueding"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 司机配置判断 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="peiZhisiji"
      width="30%"
    >
      <div class="tal">车辆配置需满足以下条件：</div>
      <div class="qiyong">
        <span>1:车辆信息已完善</span>
        <span>2:车辆无法完成运输任务</span>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="peiZhisiji = false">取 消</el-button>
        <el-button
          type="primary"
          @click="peiZhiqueding"
        >确 定</el-button>
      </span>
    </el-dialog>
    <arrange-driver
      ref="refForm"
      :title-info="{ text: '配置司机' }"
      :form-base-ad="{}"
      :car-modal-info="carModalInfo"
      @newDataes="getData"
    ></arrange-driver>
  </div>
</template>
<script>
import arrangeDriver from './components/arrange-driver.vue'
import { truckList, getCarTypeList, truckTypeAdd, truckStatusUse, truckStatusNoUse } from '@/api/transit'
export default {
  name: 'Vehicle',
  components: {
    arrangeDriver
  },
  data () {
    return {
      formInline: {},
      activeName: 'first',
      list: [],
      fenye: {
        page: 1,
        pageSize: 10,
        truckTypeId: '',
        licensePlate: '',
        workStatus: ''
      },
      total: 0,
      dialogFormVisible: false,
      cheLiangLeixingList: [],
      form: {
        truckTypeId: '',
        deviceGpsId: '',
        licensePlate: ''
      },
      rules: {
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码为空', trigger: 'blur' }
        ],
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ]
      },
      total1: '',
      total2: '',
      total3: '',
      qiyong: false,
      tingYongs: false,
      id: '',
      peiZhisiji: false,
      carModalInfo: {}
    }
  },
  mounted () {
    this.initData()
    // this.getDriverList()
    this.getData()
  },
  methods: {
    // 分页栏数据 可用 禁用 全部
    async initData() {
      this.fenye.workStatus = ''
      const { data: data1 } = await truckList(this.fenye)
      this.total1 = data1.counts
      this.fenye.workStatus = '1'
      const { data: data2 } = await truckList(this.fenye)
      this.total2 = data2.counts
      this.fenye.workStatus = '0'
      const { data: data3 } = await truckList(this.fenye)
      this.total3 = data3.counts
      this.fenye.workStatus = ''
      this.getvehicle()
      this.getcheLiangleixing()
    },
    // 渲染列表
    async getvehicle () {
      const res = await truckList(this.fenye)
      console.log(res, '777')
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 数据适配 停用启用
    getState(type) {
      const Add = {
        0: '停用',
        1: '启用'
      }
      return Add[type]
    },
    // 分页
    handleCurrentChange (val) {
      this.fenye.page = val
      this.getvehicle()
    },
    // 搜索
    onSubmit () {
      this.fenye.page = 1
      this.getvehicle(this.fenye)
    },
    // 重置
    chongzhi() {
      this.fenye = {
        page: 1,
        pageSize: 10,
        truckTypeId: '',
        licensePlate: ''
      }
      this.$refs.fenYe.resetFields()
      this.getvehicle()
    },
    // 分页栏 全部 可用 禁用
    handleClick(tab, event) {
      // console.log(tab.name)
      if (tab.name === 'first') {
        this.fenye.workStatus = ''
        this.getvehicle()
      } else if (tab.name === 'second') {
        this.fenye.workStatus = 1
        this.getvehicle()
      } else if (tab.name === 'third') {
        this.fenye.workStatus = 0
        this.getvehicle()
      }
    },
    // 新增弹框
    addCheliang () {
      this.dialogFormVisible = true
    },
    // 关闭新增的弹窗
    guanbiXinzeng() {
      this.dialogFormVisible = false
      this.form = {
        truckTypeId: '',
        deviceGpsId: '',
        licensePlate: ''
      }
      this.$refs.ruleForm.resetFields()
    },
    // 车辆类型列表
    async getcheLiangleixing () {
      const res = await getCarTypeList()
      this.cheLiangLeixingList = res.data
    },
    tianJiacheliang () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          await truckTypeAdd(this.form)
          this.getvehicle()
          this.guanbiXinzeng()
        }
      })
    },
    // 启用停用按钮
    qiYong(id) {
      this.id = id
      this.qiyong = true
    },
    async qiyongQueding() {
      const res = await truckStatusUse(this.id)
      console.log(res)
      this.$message.error(res.msg)
      this.qiyong = false
    },
    tingYong(id) {
      this.id = id
      this.tingYongs = true
    },
    async tingYongqueding() {
      const res = await truckStatusNoUse(this.id)
      console.log(res)
      this.$message.error(res.msg)
      this.tingYongs = false
    },
    // 配置司机
    // 获取车辆数据和车辆列表
    getData() {
      this.getvehicle()
    },
    peizhi(row) {
      this.carModalInfo = Object.assign({}, row)
      this.peiZhisiji = true
    },
    peiZhiqueding() {
      this.peiZhisiji = false
      this.$refs.refForm.dialogFormV()
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

.vehicle {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

.dashboard-container {
  padding: 20px;
  background-color: #f3f4f7;
  ::v-deep .el-tabs.el-tabs--card.el-tabs--top {
    margin: 20px 0;
    height: 48px !important;
    background-color: #fff;
    .el-tabs__header.is-top {
      margin: 0;
      .el-tabs__nav-scroll {
        .el-tabs__nav.is-top {
          border: 0 none;
          .el-tabs__item.is-top {
            border: 0 none;
            height: 48px !important;
            line-height: 48px !important;
            &.is-active {
              background-color: #ffeeeb;
              color: #e15536;
            }
          }
        }
      }
    }
  }
}
</style>

<style>
.startconfirm {
  width: 481px;
}
.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}
.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}
.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}
.confirm.el-message-box__title {
  font-size: 16px;
}
.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}
.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}
.ysr{
 color: red;
}
.ysb{
 color: #409EFF
}
.qiyong {
 padding-right: 80px;
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
.tal {
 text-align: left;
}
.tal1 {
 text-align: left;
 color: rgb(244, 171, 54);
}
</style>
